/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:57:57
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-03 15:38:29
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\Jing.js
 */
import * as THREE from 'three'
import React, { useRef } from 'react'
import { EffectComposer, Bloom } from '@react-three/postprocessing'
import { useFrame } from '@react-three/fiber'
import { useTexture } from "@react-three/drei"
export default function Jing({ name, position }) {
    const texture = useTexture('/jing.png');
    const ref = useRef()
    useFrame((state) => {
        const t = state.clock.getElapsedTime()

        ref.current.position.y = (position[1] + Math.sin(t / 1))
    })
    return (<group ref={ref} position={position}>
        <mesh
            rotation={[-Math.PI / 2, 0, -Math.PI/2]}>
            <planeGeometry args={[40, 40]} />
            <meshBasicMaterial
                transparent={true}
                opacity={0.1} 
                map={texture}
                side={THREE.DoubleSide} />

            <EffectComposer multisampling={8}>
                <Bloom kernelSize={1} luminanceThreshold={0} luminanceSmoothing={3} intensity={1} />
            </EffectComposer>
        </mesh>
    </group>
    )
} 